{{Extend "layout"}}
{{Block "title"}}{{$.Stored.title}}{{/Block}}
{{Block "breadcrumb"}}
{{Super}}
<li><a href="{{BackendURL}}/cloud/storage">{{"云存储账号"|$.T}}</a></li>
<li class="active">{{$.Stored.title}}</li>
{{/Block}}
{{Block "main"}}
<div class="row">
  <div class="col-md-12">
    <div class="block-flat no-padding">
      <div class="header">
        <h3>{{$.Stored.title}}</h3>
      </div>
      <div class="content">
        <form class="form-horizontal group-border-dashed" id="account-add-form" method="POST" action="">
          <div class="form-group">
            <label class="col-sm-3 control-label">{{"名称"|$.T}}</label>
            <div class="col-sm-6">
              <input type="text" class="form-control" name="name" placeholder="{{"名称"|$.T}}" value="{{$.Form "name"}}" required>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">{{"类型"|$.T}}</label>
            <div class="col-sm-6">
              <input type="text" class="form-control" name="type" value="{{$.Form "type"}}" placeholder="aws" required="required">
              <div class="help-block">
                {{`例如`|$.T}}：<code>aws</code>(Amazon) <code>oss</code>(阿里云) <code>cos</code>(腾讯云)<br />
                {{`支持所有与Amazon S3 API兼容的云存储服务`|$.T}}
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">{{"key"|$.T}}</label>
            <div class="col-sm-6">
              <input type="text" class="form-control" name="key" value="{{$.Form "key"}}" placeholder="" required="required">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">{{"secret"|$.T}}</label>
            <div class="col-sm-6">
              <input type="password" class="form-control" name="secret" value="{{$.Form "secret"}}" placeholder="" required="required">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">{{"bucket"|$.T}}</label>
            <div class="col-sm-6">
              <input type="text" class="form-control" id="bucket" name="bucket" value="{{$.Form "bucket"}}" placeholder="" required="required">
              <div class="help-block">{{`存储桶`|$.T}}</div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">{{"region"|$.T}}</label>
            <div class="col-sm-6">
              <input type="text" class="form-control" id="region" name="region" value="{{$.Form "region"}}" placeholder="">
              <div class="help-block">{{`地区`|$.T}}</div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">{{"endpoint"|$.T}}</label>
            <div class="col-sm-6">
              <input type="text" class="form-control" id="endpoint" name="endpoint" value="{{$.Form "endpoint"}}" placeholder="" required="required">
              <div class="help-block">{{`地域节点`|$.T}}</div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">{{"base URL"|$.T}}</label>
            <div class="col-sm-6">{{$baseURL := $.Form "baseurl"}}
              <span class="input-group">
              <input type="url" id="baseurl" class="form-control" name="baseurl" value="{{$baseURL}}" placeholder=""{{if not $baseURL}} disabled="disabled"{{end}}>
              <span class="input-group-btn"><a class="btn btn-default" data-edit-label="{{`编辑`|$.T}}" data-cancel-label="{{`取消`|$.T}}" id="edit-baseurl" href="javascript:;">{{`编辑`|$.T}}</a></span>
              </span>
              <div class="help-block">{{`文件根网址`|$.T}}</div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">{{"HTTPS"|$.T}}</label>
            <div class="col-sm-6">{{$v := $.Form "secure"}}
              <div class="radio radio-primary radio-inline">
                <input type="radio" value="Y" id="secure-enable" name="secure"{{if or (eq $v "Y") (eq $v "")}} checked{{end}}><label for="secure-enable">{{"启用"|$.T}}</label>
              </div>
              <div class="radio radio-danger radio-inline">
                <input type="radio" value="N" id="secure-disable" name="secure"{{if eq $v "N"}} checked{{end}}><label for="secure-disable">{{"禁用"|$.T}}</label>
              </div>
            </div>
          </div>
          <div class="form-group form-submit-group">
            <div class="col-sm-8 col-sm-offset-3">
              <button type="submit" class="btn btn-primary btn-lg"><i class="fa fa-save"></i> {{"保存"|$.T}}</button>
              <button type="reset" class="btn btn-default btn-lg"><i class="fa fa-refresh"></i> {{"重置"|$.T}}</button>
            </div>
          </div>
        </form>
      </div><!-- /.content -->
    </div><!-- /.block-flat -->
  </div>
</div>
{{/Block}}
{{Block "footer"}}
<script type="text/javascript">
$(function(){
  $('#endpoint,#bucket').on('keyup change',function(){
    if($('#baseurl').prop('disabled')){
      $('#baseurl').val('https://'+$('#bucket').val()+'.'+$('#endpoint').val());
    }
  });
  $('#endpoint').trigger('change');
  $('#edit-baseurl').on('click',function(){
    if($('#baseurl').prop('disabled')){
      $(this).text($(this).data('cancel-label'));
      $('#baseurl').prop('disabled',false);
    }else{
      $(this).text($(this).data('edit-label'));
      $('#baseurl').prop('disabled',true);
      var v=$('#baseurl').val();
      v = $.trim(v);
      if(v=='' || /^https?:\/\/[\/]*$/.test(v)){
        $('#endpoint').trigger('change');
      }
    }
  });
  if(!$('#baseurl').prop('disabled')){
    $('#edit-baseurl').text($('#edit-baseurl').data('cancel-label'));
  }else{
    $('#edit-baseurl').text($('#edit-baseurl').data('edit-label'));
  }
});
</script>
{{/Block}}